<template>
  <div class="cart-list">
    <scroll class="scroll-area" ref="scroll">
      <cart-list-item 
        :key="index" 
        v-for="(item, index) in list"
        :product="item" />
    </scroll>
  </div>
</template>

<script>
import Scroll from 'components/common/scroll/Scroll';
import CartListItem from './CartListItem';

import {mapGetters} from 'vuex';

export default {
  components: { 
    Scroll,
    CartListItem 
  },
  created() {
    // 每次刷新页面, 从LocalStorage取出购物车信息重新赋值
    console.log("CartList组件created...");
    let cartList = JSON.parse(localStorage.getItem("cartList")) || [];
    if(cartList) {
      this.$store.commit('setCartList', cartList);
    }
  },
  activated() {
    console.log("CartList activated...");
    this.$refs.scroll.refresh();
  },
  updated() {
    console.log("CartList updated...");
    this.$refs.scroll.refresh();
  },
  computed: {
    ...mapGetters({
      list: 'cartList'
    })
  }
}
</script>

<style scoped>
.cart-list {
  position: relative;
  height: calc(100vh - 142px);
}

.scroll-area {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
</style>